<template>
  <a-card :bordered="false">
    <a-space :size="54">
      <!-- :custom-request="customRequest" -->
      <a-upload
        list-type="picture-card"
        :file-list="fileList"
        :show-upload-button="true"
        :show-file-list="false"
        @change="uploadChange"
      >
        <template #upload-button>
          <a-avatar :size="100" class="info-avatar">
            <template #trigger-icon>
              <icon-camera />
            </template>
            <img v-if="fileList.length" :src="fileList[0].url" />
          </a-avatar>
        </template>
      </a-upload>
      <a-descriptions
        :column="2"
        align="right"
        layout="inline-horizontal"
        :label-style="{
          width: '100px',
          padding: '4px',
          fontWeight: 'normal',
          color: 'rgb(var(--gray-8))',
        }"
        :value-style="{
          width: '200px',
          paddingLeft: '8px',
          textAlign: 'left',
        }"
      >
        <a-descriptions-item label="用户名">{{
          userInfo?.first_name + userInfo?.last_name
        }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="value ? 'green' : 'red'" size="mini">{{
            userInfo?.is_active ? '开启' : '禁用'
          }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="账号">{{
          userInfo?.username
        }}</a-descriptions-item>
        <a-descriptions-item label="手机">{{
          userInfo?.mobile
        }}</a-descriptions-item>
      </a-descriptions>
      <a-modal v-model:visible="showSetAvatarDialog">
        <template #title> 修改头像 </template>
        <div class="cropperBox">
          <vue-cropper
            ref="cropper"
            :canMoveBox="true"
            :img="avatarBase64"
            :fixedBox="true"
            :autoCrop="true"
            autoCropWidth="200"
            autoCropHeight="200"
            outputType="png"
          ></vue-cropper>
        </div>
        <template #footer>
          <a-button @click="showSetAvatarDialog = false">取消</a-button>
          <a-button type="primary" @click="handleOK">确定</a-button>
        </template>
      </a-modal>
    </a-space>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces';
import { useUserStore } from '@/store';
import { userUploadApi } from '@/api/user';
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
import { Message } from '@arco-design/web-vue';
import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';
const userInfo = useUserStore();
const showSetAvatarDialog = ref(false);
const avatarBase64 = ref(null);

const file = {
  uid: '-2',
  name: 'avatar.png',
  url: userInfo.avatar,
};
const fileList = ref<FileItem[]>([file]);
const uploadChange = async (fileItemList: FileItem[], fileItem: FileItem) => {
  fileList.value = [fileItem];
  let avatar: any = '';
  avatar = await getBase64(fileItem.file);
  avatarBase64.value = avatar;
  showSetAvatarDialog.value = true;
};
const handleOK = async () => {
  try {
    const res = await userUploadApi({ avatar: avatarBase64.value });
    Message.success('更新头像成功');
  } catch (error) {
  } finally {
    showSetAvatarDialog.value = false;
  }
};

// 图片转Base64
const getBase64 = (file: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    let imgBase64: any = '';
    reader.readAsDataURL(file);
    reader.onload = () => {
      imgBase64 = reader.result;
    };
    reader.onerror = (error) => reject(error);
    reader.onloadend = () => resolve(imgBase64);
  });
};
</script>

<style scoped lang="less">
.cropperBox {
  width: 100%;
  height: 300px;
}
//  :deep(.cropper-view-box ){
//     border-radius: 50%; // 将裁剪框由方形调整为圆形
//   }
.arco-card {
  padding: 14px 0 4px 4px;
  border-radius: 4px;
}
:deep(.arco-avatar-trigger-icon-button) {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #e8f3ff;
  .arco-icon-camera {
    margin-top: 8px;
    color: rgb(var(--arcoblue-6));
    font-size: 14px;
  }
}
</style>
